<template>
	<view class="page">
		<v-header title="账号登录" @click-left="$back()"></v-header>
		<view class="layout" :style="{ marginTop: h + 'px' }">
			<view class="signContainer">
				<view class="loginBox">
					<view class="f cell">
						<label class="label phone"></label>
						<input class="fl" type="text" v-model="username" placeholder="请输入账号/手机号" maxlength="30" />
					</view>
					<view class="f cell">
						<label class="label pwd"></label>
						<input class="fl" type="password" v-model="password" placeholder="请输入密码" maxlength="20" />
					</view>
				</view>
				<view class="cu-btn block round login" @click="toChoseSys">登 录</view>
				<view class="cu-btn block round login closeBtn" @tap="loginSubmit">关 闭</view>
				<view class="f fe pwd" @click="showPop">忘记密码?</view>
				<view class="Bottom"></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			h: this.$h,
			username: '',
			password: ''
		};
	},
	methods: {
		toChoseSys(){
			uni.navigateTo({
				url: '../../views/login/choseSys'
			});
		},
		loginSubmit(){
			uni.navigateTo({
				url: '/pages/login/login'
			});
		},
		showPop() {
			uni.showModal({
				title: '提示',
				content: '请登录北航天汇孵化器汇创云服务平台 (www.bbi.com.cn)找回密码',
				success: function(res) {
					if (res.confirm) {
					} else if (res.cancel) {
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.signContainer {
	width: 100%;
	padding-top: 90rpx;
	.loginBox {
		.cell {
			height: 120rpx;
			margin: 0 54rpx 30rpx 54rpx;
			border-bottom: solid 1rpx $bcolor;
			font-size: 32rpx;
			.label {
				width: 80rpx;
				height: 100%;
				margin-right: 10rpx;
				&.phone {
					background: url(../../static/img/register_2.png) no-repeat center;
					background-size: 36rpx;
				}
				&.pwd {
					background: url(../../static/img/register_5.png) no-repeat center;
					background-size: 36rpx;
				}
				
			}
			input {
				height: 60rpx;
			}
		}
	}
	.login {
		font-size: 36rpx;
		margin: 60rpx 54rpx 30rpx 54rpx;
		height: 96rpx;
		color: #fff;
		background-image: linear-gradient(to left, $color ,#00aaff);
	}
	.closeBtn {
		margin-top: 0;
		background: #ccc;
	}
	.pwd {
		margin-right: 54rpx;
		color: #333;
		text-decoration: underline;
	}
	.Bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 160rpx;
		background: url(../../static/img/mine_water_ripple.png) no-repeat;
		background-size: 100% 100%;
	}
}
</style>
